﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
          + request.getServerName() + ":" + request.getServerPort()
          + path;
  request.setAttribute("basePath", basePath);
%>

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>Chart图表 - 贴吧项目</title>
  <base href="${basePath}/static/admin/">
  <link rel="icon" href="favicon.ico" type="image/ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/fonts.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

</head>

<body>
<!--页面主要内容-->
<main class="ftdms-layout-content">

  <div class="container-fluid" style="margin-bottom:90px;">
    <button type="button" class="btn btn-success" onclick="chartOne()">饼状图显示</button>
    <button type="button" class="btn btn-success" onclick="chartTwo()">柱状图显示</button>
  </div>
  <%--饼状图显示--%>
  <div id="main1" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
  <%--柱状图显示--%>
  <div id="main2" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>

</main>
<!--End 页面主要内容-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script>
  //自定义JS函数完成图表显示
  function chartOne(){
    $.post("../admin/jobchartfirst.action",function(data){
      console.log(data);
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series : [
          {
            name: '帖子数量',
            type: 'pie',
            radius: '55%',
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },"json");
  }
  //自定义使用柱状图显示
  function chartTwo(){
    $.post("../admin/jobchartsecode.action",function(data){
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
      console.log(data.names);
      console.log(data.values);
      option = {
        title: {
          text: '用户帖子'
        },
        tooltip: {},
        legend: {
          data:['数量']
        },
        xAxis: {
          data: data.names
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: data.values
        }]
      };
      option && myChart.setOption(option);
    },"json");
  }


</script>
</body>
</html>